<template>
  <div class="salesAnalysis">
    <!-- nb24小时实时数据 柱状图 -->
    <div id="main" class="salesAnalysis-main"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
export default {
  props: ['echartsData', 'freeingData'],
  name: 'ecahrtsM',
  data: () => ({ myChart: null }),
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  methods: {
    initEcharts() {
      let chartDom = document.getElementById('main')
      this.myChart = echarts.init(chartDom)
      let option = {
        color: ['#61a0a8'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ['水量'],
        },
        xAxis: [
          {
            type: 'category',
            data: this.echartsData,
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              interval: 0, // 0 所有显示
            },
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '读数',
            //scale: true,
            interval: 50,
            /* axisLabel: {
              formatter: '{value} ',
            }, */
          },
        ],
        series: [
          {
            name: '用水',
            type: 'bar',
            data: this.freeingData,
            showBackground: true,
            backgroundStyle: {
              color: '#61a0a8',
            },
          },
        ],
      }

      option && this.myChart.setOption(option)
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    },
  },
  mounted() {
    this.initEcharts()
  },
}
</script>

<style lang="scss" scoped>
.salesAnalysis-main {
  width: 1000px;
  height: 380px;
}
</style>
